<template>
  <div>
     <p>{{reversemsg}}</p>
    <p>{{reversemsg}}</p>
    <p>{{reversemsg}}</p> 
    <p>{{getreversemsg()}}</p>
    <p>{{getreversemsg()}}</p>
    <p>{{getreversemsg()}}</p>
  </div>
</template>

<script>
export default {
data(){
  return {
    msg:'Hello, Vue',
  }
},
// 计算属性的优势
// 带缓存
// 当计算属性的函数执行以后,对应的return的值会被缓存起来
// 当依赖项不变的情况下,会直接取值,不会再次执行
// 当依赖项的值发生改变的情况下,计算属性的函数会再次调用,并将值从新缓存起来
computed:{
  reversemsg(){
    console.log('计算属性被执行l')
    return this.msg.split('').reverse().join('')
  }
},
methods:{
  getreversemsg(){
    console.log('函数被执行了')
    return this.msg.split('').reverse().join('')
  }
}
}
</script>

<style>

</style>